<template>
  <div>
    <!-- <h1>商场首页</h1> -->
    <div class="top">
      <div class="head">
        <!-- 艺术字 -->
        <div>
          <h2 class="title">正品保证</h2>
          <h5 class="title">用心选&nbsp;&nbsp;放心购</h5>
        </div>
        <!-- 搜索框 -->
        <van-search
          shape="round"
          @click="showPopup"
          background="rgb(58, 151, 255)"
          placeholder="用心选 放心购"
        />
        <!-- 弹出框 -->
        <van-popup v-model="content" position="top" :style="{ height: '100%' }">
          <div class="btn-search">
            <van-search
              v-model="msg"
              shape="round"
              @click="search"
              background="whitesmoke"
              placeholder="用心选 放心购"
            />
            <van-button type="info" plain @click="del" class="bttn" color="grey">取消</van-button>
            <van-button type="info" plain class="bttn" @click="search" color="grey">搜索</van-button>
          </div>

          <div>
            <div>
              <h6 class="txts">热门搜索</h6>
            </div>
            <div class="tag">
              <div class="tag-item">鱼竿</div>
              <div class="tag-item">浮漂</div>
              <div class="tag-item">鱼线</div>
            </div>
            <div class="tag">
              <div class="tag-item">饵料</div>
              <div class="tag-item">逐鹿</div>
              <div class="tag-item">五粮诱</div>
            </div>
          </div>
        </van-popup>
        <!-- 购物车 -->
        <div @click="car()">
          <van-icon name="cart-o" color="#fff" size="3rem" />
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <div>
      <img src="../../static/images/ad.png" class="img" />
    </div>
    <!-- 分类小图标 -->
    <!-- 列表 -->
    <div class="list">
      <div v-for="(item,index) in arr" :key="index" class="item" @click="skip(index)">
        <div>
          <img :src="item.img" class="icon-img" />
        </div>
        <div>
          <h5 v-text="item.title"></h5>
        </div>
      </div>
    </div>
    <!-- 中间的广告轮播图-->
    <div class="main">
      <div class="swipers">
        <div>
          <h1 class="text">新人专享</h1>
          <h5 class="text">1折抢渔具,抢完为止</h5>
        </div>
        <div>
          <img src="../../static/fish-img/00.png" class="arrow" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img :src="item" class="ids" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="txt">
        <div>
          <h1 class="text">500元大礼包</h1>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div>
          <h4 class="text">先领券再下单,划算到底</h4>
        </div>
      </div>
      <!-- 优惠券 -->
      <div class="ticket">
        <div class="quan">
          <h1>40元</h1>
        </div>
        <div class="quan">
          <h1>90元</h1>
        </div>
        <div class="quan">
          <h1>120元</h1>
        </div>
        <div class="quan">
          <h1>150元</h1>
        </div>
      </div>
      <!-- 立即领取 -->
      <div>
        <van-button round type="info" block color="rgb(251,160,58)">立即领取</van-button>
      </div>
    </div>

    <!-- 中间的限时抢购模块 -->
    <div class="time">
      <div class="product-text">
        <div class="product-title">限时秒杀：</div>
        <div class="product-time">
          <van-count-down :time="time" />
        </div>
      </div>
      <div class="product-time">精品渔具，限时促销</div>
      <div class="product">
        <div v-for="(item, index) in shopImage" :key="index">
          <img class="shop-img" :src="item" />
        </div>
      </div>
    </div>
    <div class="shop-box">
      <div class="box1">
        <div class="box1-left">
          <div class="box1-txt">
            <div>
              <h1>自主品牌</h1>
            </div>
            <div>
              <h4>匠心出精品</h4>
            </div>
          </div>
          <div class="photo">
            <div class="photo1">书</div>
            <div class="photo2">电脑</div>
          </div>
        </div>
        <div class="box1-right">
          <div class="box1-right1">
            <div>
              <h1>新手装备</h1>
            </div>
            <div>
              <h4>入门首选</h4>
            </div>
          </div>
          <div class="box1-right2">
            <div>
              <h1>预约秒杀</h1>
            </div>
            <div>
              <h4>29元秒神戟</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="box2-left">
          <div class="box1-txt">
            <div>
              <h1>热销渔具</h1>
            </div>
            <div>
              <h4>超值爆款&nbsp;&nbsp;钓友力荐</h4>
            </div>
          </div>
          <div class="photo">
            <div class="photo1">鱼钩</div>
            <div class="photo2">鱼线</div>
          </div>
        </div>
        <div class="box2-right">
          <div class="box1-txt">
            <div>
              <h1>新品上架</h1>
            </div>
            <div>
              <h4>好货上新&nbsp;&nbsp;抢鲜装备</h4>
            </div>
          </div>
          <div class="photo">
            <div class="photo1">渔具</div>
            <div class="photo2">鱼轮</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐;新品;自主品牌;超级Vip -->
    <div class="list-nav">
      <div class="nav-tab">
        <van-tabs v-model="active" @click="toName" class="nav-tab">
          <van-tab class="title-name" v-for="(item,index) in nameArr" :title="item" :key="index"></van-tab>
        </van-tabs>
      </div>
      <!-- 商品 -->
      <div class="good-all">
        <div class="goods-detail" v-for="(item,index) in goods" :key="index" @click="showGood(index)">
          <div>
            <img class="good-img" :src="item.productPicList[0]" />
          </div>
          <div class="good-name">{{item.name}}</div>
          <div class="good-price">
            <div class="price">￥{{item.price}}</div>
            <div class="oldprice">￥{{item.oldPrice}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div>
      <van-tabbar class="nav-tar" route>
        <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/add" icon="location-o">定位</van-tabbar-item>
        <van-tabbar-item to="/shop" icon="cart-circle-o">商城</van-tabbar-item>
        <van-tabbar-item to="/forum" icon="friends-o">论坛</van-tabbar-item>
        <van-tabbar-item to="/self" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  // mounted() {
  //   console.log(this.active);
  // },
  data() {
    return {
      msg: '',
      value1: '',
      flag: false,
      active: this.$route.query.number,
      nameArr: ['推荐', '新品', '自主品牌', '超级VIP'],
      content: false,
      //空的商品数组
      goods: [],
      image: [
        'static/Home-img/carousel01.png',
        'static/Home-img/carousel02.png',
        'static/Home-img/carousel03.png'
      ],
      //arr数组存放目录名字
      arr: [
        // {
        //   img:'',title:'',
        // },
        {
          img: '../../static/fish-img/01.png',
          title: '鱼竿'
        },
        {
          img: '../../static/fish-img/02.png',
          title: '饵料'
        },
        {
          img: '../../static/fish-img/03.png',
          title: '鱼线'
        },
        {
          img: '../../static/fish-img/04.png',
          title: '浮漂'
        },
        {
          img: '../../static/fish-img/05.png',
          title: '鱼钩'
        },
        {
          img: '../../static/fish-img/09.png',
          title: '竿包鱼护'
        },
        {
          img: '../../static/fish-img/04.png',
          title: '垂钓工具'
        },
        {
          img: '../../static/fish-img/08.png',
          title: '抄网支架'
        },
        {
          img: '../../static/fish-img/09.png',
          title: '钓箱钓椅'
        },
        {
          img: '../../static/fish-img/10.png',
          title: '盒子'
        },
        {
          img: '../../static/fish-img/01.png',
          title: '防晒'
        },
        {
          img: '../../static/fish-img/05.png',
          title: '夜钓'
        },
        {
          img: '../../static/fish-img/11.png',
          title: '休闲户外'
        },
        {
          img: '../../static/fish-img/14.png',
          title: '黑坑'
        },
        {
          img: '../../static/fish-img/05.png',
          title: '鱼轮'
        },
        {
          img: '../../static/fish-img/01.png',
          title: '路亚'
        },
        {
          img: '../../static/fish-img/01.png',
          title: '海钓'
        },
        {
          img: '../../static/fish-img/02.png',
          title: '筏钓'
        },
        {
          img: '../../static/fish-img/01.png',
          title: '冰钓'
        },
        {
          img: '../../static/fish-img/01.png',
          title: '配节售后'
        }
      ],
      //  秒杀商品倒计时时间
      time: 30 * 60 * 60 * 1000,
      images: [
        'static/Home-img/carousel01.png',
        'static/Home-img/carousel02.png',
        'static/Home-img/carousel03.png'
      ],
      // 限时秒杀商品产品图
      shopImage: [
        'static/Home-img/carousel01.png',
        'static/Home-img/carousel02.png',
        'static/Home-img/carousel03.png'
      ]
    };
  },
  mounted() {
    axios({
        method: 'post',
        url: '/api/menuProductList/' +1
      }).then(res => {
        console.log('打印',res);
        this.goods = res.data.data;
        console.log('返回goods',this.goods);
      });
  },
  methods: {
    showPopup() {
      this.content = true;
    },
    //搜索框事件
    search() {
      if (this.msg !== '') {
        //点击搜索进行跳转
        axios
          .post(
            '/api/searchProduct',
            {},
            {
              params: {
                seaMsg: this.msg
              }
            }
          )
          .then(res => {
            // 搜索展示 推荐;销量;价格;
            console.log(res.data.data[0]);
          });
      }
    },
    del() {
      this.content = false;
    },
    // 购物车
    car() {
      this.$router.push({
        name: '购物车'
      });
    },
    //点击商品跳转,路由传参
    showGood(index) {
      this.$router.push({
        name: '商品详情',
        query: {
          id:this.goods[index].productNum,
          nowPrice:this.goods[index].price,
          old:this.goods[index].oldPrice
        }
      });
    },
    //点击跳转
    toName(name, title) {
      this.titleNumber = name;
      console.log(name, title);
      axios({
        method: 'post',
        url: '/api/menuProductList/' + (name + 1)
      }).then(res => {
        console.log(res);
        console.log(name, title);
        this.goods = res.data.data;
        console.log(this.goods);
      });
      //点击搜索进行跳转
    },
    // 小图标显示
    show() {
      this.flag = true;
    },
    // 小图标隐藏
    hidden() {
      this.flag = false;
    },
    //分类小图标//跳转页面
    skip(index) {
      this.$router.push({
        name: '分类',
        query: { id: index }
      });
    }
  }
};
</script>
<style scoped>
.top {
  background-color: rgb(58, 151, 255);
  height: 6.2rem;
  position: sticky;
  z-index: 99;
  top: 0;
}
.head {
  padding: 0.8rem;
  display: flex;
  z-index: 99;
  /* position: sticky; */
  /* top: 0; */
  /* opacity: 0.6; */
  justify-content: space-between;
  align-items: center;
}
.title {
  color: aliceblue;
}
.img {
  padding: 0.6 rem 0.2rem;
  border-radius: 1rem;
  width: 37rem;
  height: 18rem;
}
/* 样式btn */
.btn-search {
  display: flex;
  justify-content: space-evenly;
}
/* tag 样式*/
.txts {
  color: gray;
}
.tag-item {
  border: black 1px solid;
  font-size: 1.4rem;
  width: 5rem;
  text-align: center;
  opacity: 0.5;
  padding: 1rem;
}
.bttn {
  margin-top: 0.5rem;
  background-color: whitesmoke;
}
.tag {
  display: flex;
  padding: 1rem;
  justify-content: space-around;
  align-items: center;
}
/* 分类 */
.list-nav {
  margin: 4rem 0rem;
  height: 5rem;
  width: 35rem;
  border: solid whitesmoke 2px;
}
.title-name {
  width: 5rem;
}
/* nav-title */
.nav-title {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 0rem 0.5rem;
  /* border: solid whitesmoke 2px; */
  width: 37.5rem;
  height: 32rem;
}
/* 图片大小 */
.icon-img {
  width: 4rem;
  height: 4rem;
}
.item {
  text-align: center;
  width: 7rem;
  height: 7rem;
}
.icon {
  width: 5rem;
  height: 5rem;
}
.main {
  width: 34rem;
  height: 31.5rem;
  padding: 1rem;
  margin: 0.9rem;
  background-image: url(../../static/fish-img/bg.png);
  background-size: auto;
  background-repeat: no-repeat;
}
.swipers {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.text {
  color: aliceblue;
}
.arrow {
  float: right;
}
.ids {
  width: 34rem;
  height: 16rem;
}
.txt {
  display: flex;
  align-items: center;
}
.ticket {
  display: flex;
  justify-content: space-evenly;
}
.quan {
  width: 6rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  background-color: darkorange;
}
.time {
  border: solid whitesmoke 2px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 0.6rem;
  width: 35.5rem;
  height: 18rem;
}
/* 限时秒杀商品图片样式 */
.shop-img {
  width: 8rem;
  height: 8rem;
  display: block;
  margin-top: 1rem;
  margin-left: 2rem;
  border-radius: 0.5rem;
  border: 0.5rem solid red;
}
/* 限时秒杀文字样式 */
.product-text {
  display: flex;
  border-top: 0.1rem gainsboro solid;
}
.product-title {
  color: red;
  font-weight: bolder;
  font-size: 2rem;
  margin-left: 2rem;
}
.product-time {
  font-weight: bolder;
  font-size: 1rem;
  margin-left: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
/* 限时秒杀商品排列样式 */
.product {
  display: flex;
}
/* 商品分类模块 */
.shop-box {
  display: flex;
  /* border: solid whitesmoke 2px; */
  margin-top: 3rem;
  width: 37.5rem;
  height: 19rem;
  justify-content: space-around;
  flex-direction: column;
}
.box1 {
  display: flex;
  padding: 1rem;
  height: 14rem;
  justify-content: space-evenly;
  flex-direction: row;
}
.box1-txt {
  padding: 0.3rem;
}
.box2 {
  display: flex;
  padding: 1rem;
  height: 14rem;
  justify-content: space-evenly;
  flex-direction: row;
}
.box1-left {
  display: flex;
  width: 18rem;
  height: 12rem;
  border: solid whitesmoke 2px;
  flex-direction: column;
  justify-content: start;
}
.box1-right {
  border: solid whitesmoke 2px;
  width: 18rem;
  display: flex;
  flex-direction: column;
  height: 12rem;
}
.box1-right1 {
  width: 16rem;
  height: 3rem;
  padding: 1rem;
  border: solid whitesmoke 1px;
}
.box1-right2 {
  width: 16rem;
  height: 3rem;
  padding: 1rem;
  border: solid whitesmoke 1px;
}
.box2-left {
  border: solid whitesmoke 2px;
  width: 18rem;
  height: 10rem;
}
.box2-right {
  width: 18rem;
  height: 10rem;
  border: solid whitesmoke 2px;
}

.photo {
  display: flex;
  justify-content: space-around;
}
.photo1,
.photo2 {
  width: 6rem;
  height: 5rem;
  border: black solid 1px;
}
/* 小的导航栏 */
.small-nav {
  display: flex;
  height: 3rem;
  margin-top: 4rem;
  border: solid whitesmoke 3px;
  justify-content: space-evenly;
  align-items: center;
}
/* 商品分类样式 */
.nav-icon {
  margin-right: 2rem;
}
.classify-item {
  display: flex;
}
.class-tab {
  width: 34rem;
}
.title-text {
  font-size: 2rem;
  font-weight: bolder;
}
.class-icon {
  margin-top: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.title-img {
  width: 3rem;
  height: 3rem;
}
.shop-sort {
  display: flex;

  justify-content: space-between;
  margin-left: 2rem;
}
.good-img {
  width: 15rem;
  height: 15rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
  margin-left: 1.5rem;
}
.goods-detail {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  width: 18rem;
  height: 25rem;
  display: flex;
  flex-direction: column;
}
.good-price {
  display: flex;
}
.resort {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-evenly;
}
.price {
  margin-left: 3rem;
  color: orangered;
}
.oldprice {
  color: gray;
  text-decoration-line: line-through;
  margin-left: 2rem;
}
.good-all {
  background-color: rgb(250, 248, 248);
  display: flex;
  width: 37.5rem;
  flex-wrap: wrap;
  justify-content: start;
}
.good-name {
  height: 3rem;
  text-align: center;
}
</style>